<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :before-close="handleClose"
    :title="`${$t('lend')}`"
    width="60%"
  >
    <el-form
      :inline="true"
      :model="formInline"
      label-width="120px"
    >
      <el-form-item v-if="tableData.length>0 || tableTypeData.length>0" :label="`${$t('toolingBarcode')}`">
        <el-input
          v-model="toolingBarcode"
          clearable
          @keydown.enter.native="checkBarcode"
        />
      </el-form-item>
      <el-form-item v-else :label="`${$t('PrelendNo')}`">
        <el-input
          v-model="prelendNo"
          clearable
          @keydown.enter.native="getFormInfo"
        />
      </el-form-item>
      <span v-show="Object.keys(formInline).length>0">
        <el-form-item :label="`${$t('lendToId')}`">
          <el-input v-model="formInline.lendId" clearable/>
        </el-form-item>
        <el-form-item :label="`${$t('lendId')}`">
          <el-input v-model="formInline.lendToId" clearable/>
        </el-form-item>
        <el-form-item :label="`${$t('workOrder')}`">
          <el-input v-model="formInline.workOrder" clearable disabled/>
        </el-form-item>
        <el-form-item :label="`${$t('productName')}`">
          <el-input v-model="formInline.productName" clearable disabled/>
        </el-form-item>
        <el-form-item :label="`${$t('eqpName')}`">
          <el-input v-model="formInline.eqpId" clearable disabled/>
        </el-form-item>
        <el-form-item :label="`${$t('custName')}`">
          <el-input v-model="formInline.custName" clearable disabled/>
        </el-form-item>
        <el-form-item :label="`${$t('remark')}`">
          <el-input
            v-model="formInline.lendRemark"
            :rows="2"
            type="textarea"
          />
        </el-form-item>
      </span>
    </el-form>
    <p v-show="tableData&&tableData.length>0">{{ $t('ToolingCode') }}</p>
    <dynTable
      v-show="tableData&&tableData.length>0"
      ref="dynTable"
      :loading="tableLoading"
      :table-data="tableData"
      :table-columns="tableColumns"
    />
    <div v-show="tableTypeData&&tableTypeData.length>0">
      <p>{{ $t('toolingModel') }}</p>
      <el-table
        :data="tableTypeData"
        :tree-props="{children: 'children'}"
        :header-cell-style="headerStyle"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border>
        <el-table-column
          :label="`${$t('index')}`"
          type="index"
          align="center"
          width="50"/>
        <el-table-column
          :label="`${$t('toolingModel')}`"
          prop="toolingModel"
          align="center"
          width="180"/>
        <el-table-column
          :label="`${$t('ToolingNum')}`"
          prop="cnt"
          align="center"
          width="180"/>
        <el-table-column
          :label="`${$t('stock')}`"
          prop="stock"
          align="center"/>
        <el-table-column
          :label="`${$t('toolingBarcode')}`"
          prop="toolingBarcode"
          align="center"/>
        <el-table-column
          :label="`${$t('verification')}`"
          prop="address"
          align="center"/>
      </el-table>
    </div>
    <span slot="footer">
      <el-button icon="el-icon-circle-close" @click="handleClose">{{
        $t("cancel")
      }}</el-button>
      <el-button type="primary" icon="el-icon-receiving" @click="doSaveLend">
        {{ $t('lend') }}
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
import mySetting from '@/mixins/mySetting'
import networkTips from '@/mixins/networkTips'
import toolingPreLendApi from '@/api/Tooling/toolingPreLend'
export default {
  name: 'LendForm',
  components: {},
  mixins: [mySetting, networkTips],
  data() {
    return {
      dialogVisible: false,
      prelendNo: '',
      toolingBarcode: '',
      formInline: {},
      tableData: [],
      tableColumns: [
        { prop: 'toolingBarcode', label: this.$t('toolingBarcode') },
        { prop: 'toolingType', label: this.$t('toolingType') },
        { prop: 'stock', label: this.$t('stock') },
        { prop: 'isChecked', label: this.$t('verification'), templete: (_scope) => {
          return (
            <el-tag type={this.filterType(_scope.row.isChecked)} effect='dark'>
              { _scope.row.isChecked ? '已验证' : '未验证' }
            </el-tag>
          )
        } }
      ],
      tableLoading: true,
      tableTypeData: []
    }
  },
  methods: {
    // 获取信息
    async getFormInfo() {
      const res = await toolingPreLendApi.getLendInfo({ prelendNo: this.prelendNo })
      this.formInline = Object.assign({}, this.formInline, res.data)
      Array.isArray(res.data.pldToolingList) && res.data.pldToolingList.forEach(ele => {
        if (ele.bringMode === 1) {
          this.tableData.push(ele)
        } else if (ele.bringMode === 2) {
          this.tableTypeData.push(ele)
        }
      })
      // this.tableData = res.data.pldToolingList.filter((ele) => ele.bringMode === 1)
      // this.tableTypeData = res.data.pldToolingList.filter((ele) => ele.bringMode === 2)
      this.tableLoading = false
      // this.prelendNo = ''
      this.netTips(res)
    },
    // 验证表单是否验证
    async checkBarcode() {
      const res = await toolingPreLendApi.checkBarcode(
        { toolingBarcode: this.toolingBarcode,
          toolingBarcodeList: this.tableData.map(ele => ele.toolingBarcode),
          toolingModelList: this.tableTypeData.map(ele => ele.toolingModel)
        })
      if (res.data.bringMode === 1 && res.code === 1) {
        const idx = this.tableData.findIndex((ele) => ele.toolingBarcode === res.data.toolingBarcode)
        this.$set(this.tableData[idx], 'isChecked', res.data.isChecked)
        this.toolingBarcode = ''
        this.netTips(res)
      } else if (res.data.bringMode === 2 && res.code === 1) {
        const idx = this.tableTypeData.findIndex((ele) => ele.toolingBarcode === res.data.toolingBarcode)
        this.tableTypeData[idx].children.push(res.data)
      } else {
        this.netTips(res)
      }
    },
    // 借出备件信息
    doSaveLend() {
      toolingPreLendApi.doSaveLend({ ...this.$clearNull(this.formInline), toolingBarcodeList: this.tableData }).then((res) => {
        this.netTips(res, this.handleUpdate, this.handleClose)
      })
    },
    handleOpen(val) {
      if (val && val.id) {
        this.prelendNo = val.prelendNo
        this.getFormInfo()
      }
      this.dialogVisible = true
    },
    headerStyle() {
      return {
        'background': '#F2F6FC', 'color': '#606266'
      }
    },
    handleClose() {
      Object.assign(this.$data, this.$options.data.call(this))
    },
    filterType(val) {
      const statusMap = {
        1: 'success',
        0: 'danger'
      }
      return statusMap[val]
    }
  }
}
</script>

<style scoped lang="scss">
.el-form {
  display: flex;
  flex-wrap: wrap;
  .el-form-item {
    width: 48%;
    ::v-deep .el-input__inner {
      width: 250px;
    }
  }
}
.el-textarea {
  width: 250px;
}
</style>
